<template>
	<view class="order-page">
		<!-- 页面标题 -->
		<view class="page-header">
			<text>撤销工单</text>
		</view>

		<!-- 筛选区域 -->
		<view class="filter-card">
			<view class="filter-item">
				<text class="form-label">工单状态</text>
				<picker mode="selector" :range="statusOptions[0]" @change="onStatusChange">
					<view class="filter-input">{{ selectedStatusText || '请选择状态' }}</view>
				</picker>
			</view>

			<view class="filter-item">
				<text class="form-label">工单类型</text>
				<picker mode="selector" :range="typeOptions" @change="onTypeChange">
					<view class="filter-input">{{ selectedTypeText || '请选择类型' }}</view>
				</picker>
			</view>

			<view class="filter-item">
				<text class="form-label">创建时间</text>
				<picker mode="date" @change="onDateChange">
					<view class="filter-input">{{ formData.createTime || '请选择日期' }}</view>
				</picker>
			</view>

			<view class="filter-item">
				<text class="form-label">起始页</text>
				<input type="number" v-model="formData.page" placeholder="请输入起始页" class="filter-input" />
			</view>

			<view class="filter-item">
				<text class="form-label">页大小</text>
				<input type="number" v-model="formData.pageSize" placeholder="请输入页大小" class="filter-input" />
			</view>

			<button class="primary-btn" @click="loadOrders">查询</button>
		</view>

		<!-- 工单列表 -->
		<view v-if="orders.length > 0" class="order-list">
			<view v-for="order in orders" :key="order.id" class="order-card">
				<view class="order-header">
					<text class="order-id">#{{ order.id }}</text>
					<text class="order-status" :class="'status-' + order.status">
						{{ getStatusText(order.status) }}
					</text>
				</view>
				<view class="order-body">
					<text class="order-title">{{ order.title }}</text>
					<br>
					<text class="order-time">更新时间：{{ order.updateTime }}</text>
				</view>
				<view class="order-footer">
					<button @click="openRevokeModal(order.id)"
						:class="canRevoke(order.status) ? 'primary-btn' : 'disabled-btn'"
						:disabled="!canRevoke(order.status)">
						撤销工单
					</button>
				</view>
			</view>
		</view>

		<!-- 无数据提示区域 -->
		<view v-else-if="loaded" class="no-data">
			<image src="/static/empty-state.png" class="no-data-image" />
			<text class="no-data-title">没有找到可撤销的工单</text>
			<text class="no-data-desc">请更换筛选条件后重试</text>
		</view>

		<!-- 撤销弹窗 -->
		<view v-if="isRevokeModalVisible" class="modal-mask">
			<view class="modal-box">
				<text class="modal-title">撤销工单</text>
				<text class="modal-tip">请输入撤销原因（不少于10个字符）</text>
				<textarea v-model="revokeReason" class="modal-textarea" placeholder="请输入原因"></textarea>
				<view class="modal-actions">
					<button class="cancel-btn" @click="closeRevokeModal">取消</button>
					<button class="submit-btn" @click="submitRevoke(revokeOrderId, revokeReason)">确定</button>
				</view>
			</view>
		</view>

	</view>
</template>



<script>
	export default {
		data() {
			return {
				isRevokeModalVisible: false,
				revokeOrderId: null,
				revokeReason: '',
				loaded: false, // 用于标记是否已经加载过数据
				statusMap: { // 状态码与文本的映射关系
					1: '待审批',
					2: '已审批',
					3: '已驳回',
					4: '操作中',
					5: '已完成',
					6: '已撤销'
				},
				orders: [], // 订单列表
				token: null, // 登录成功后获取的 Token
				formData: {
					title: '', // 工单对应的流程类型的名称
					createTime: '', // 创建时间
					page: 1, // 起始页
					pageSize: 20, // 页大小
					statusList: [] // 工单对应的状态列表，初始化为空数组
				},
				statusOptions: [
					['待审批', '已审批', '已驳回', '操作中', '已完成', '已撤销']
				],
				selectedStatusText: "", // 用于显示选中的状态文本
				typeOptions: [], // 用于存储从接口获取的类型列表
				selectedTypeText: "" // 用于显示选中的类型文本
			};
		},
		methods: {
			getStatusText(statusCode) {
				return this.statusMap[statusCode] || '未知状态';
			},
			onStatusChange(e) {
				const selectedIndex = e.detail.value;
				const selectedLabel = this.statusOptions[0][selectedIndex];

				this.selectedStatusText = selectedLabel;

				// 发送给后端的状态码，默认从 1 开始（+1）
				this.formData.statusList = [selectedIndex + 1];
			},
			onDateChange(e) {
				const selectedDate = e.detail.value; // 用户选择的日期，格式为 "YYYY-MM-DD"
				const fullDateTime = `${selectedDate} 00:00`; // 将时间设置为 00:00，中间用空格隔开，没有 T
				this.formData.createTime = fullDateTime;
			},
			async loadOrders() {
				try {
					this.token = uni.getStorageSync('token');

					if (this.formData.statusList.length === 0) {
						this.formData.statusList = [0]; // 如果没有选择状态，则默认为0
					}

					const res = await uni.request({
						url: "http://localhost:8082/api/applicant/orderList", // 后端接口地址
						header: {
							'Authorization': 'Bearer ' + this.token, // 使用 Token
							'Content-Type': 'application/json'
						},
						method: 'PUT',
						data: { // 直接发送对象
							page: this.formData.page,
							pageSize: this.formData.pageSize,
							title: this.formData.title,
							statusList: this.formData.statusList, // 使用 statusList 数组
							createTime: this.formData.createTime
						}
					});

					if (res.statusCode === 200 && res.data.code === 1) {
						this.orders = res.data.data.records;
						this.loaded = true; // 标记数据已加载
					} else {
						console.log(res.data);
						uni.showToast({
							title: '加载工单列表失败',
							icon: 'none'
						});
					}
				} catch (err) {
					uni.showToast({
						title: '请求接口失败',
						icon: 'none'
					});
				}
			},
			async fetchTypeList() {
				try {
					this.token = uni.getStorageSync('token');
					const res = await uni.request({
						url: "http://localhost:8082/api/applicant/TypeList", // 获取类型列表的接口地址
						header: {
							'Authorization': 'Bearer ' + this.token, // 使用 Token
							'Content-Type': 'application/json'
						},
						method: 'GET'
					});

					if (res.statusCode === 200 && res.data.code === 1) {
						this.typeOptions = res.data.data.map(item => item
							.typeName); // 假设返回的数据结构为 [{name: '类型1'}, {name: '类型2'}]
					} else {
						uni.showToast({
							title: '加载类型列表失败',
							icon: 'none'
						});
					}
				} catch (err) {
					uni.showToast({
						title: '请求接口失败',
						icon: 'none'
					});
				}
			},
			onTypeChange(e) {
				const selectedIndex = e.detail.value;
				this.selectedTypeText = this.typeOptions[selectedIndex]; // 更新选中的类型文本
				this.formData.title = this.typeOptions[selectedIndex];
			},
			canRevoke(status) {
				// 允许撤销的状态码（如：1-待审批，2-已审批）
				return [1, 2].includes(status);
			},
			openRevokeModal(orderId) {
				this.revokeOrderId = orderId;
				this.revokeReason = '';
				this.isRevokeModalVisible = true;
			},
			closeRevokeModal() {
				this.isRevokeModalVisible = false;
			},
			async submitRevoke(orderId, reason) {
				if (reason.length >= 10) {
					try {
						const token = uni.getStorageSync('token');
						const res = await uni.request({
							url: "http://localhost:8082/api/applicant/revoke",
							header: {
								'Authorization': 'Bearer ' + token,
								'Content-Type': 'application/json'
							},
							method: 'PUT',
							data: {
								orderId: orderId,
								revokeReason: reason
							}
						});

						if (res.statusCode === 200 && res.data.code === 1) {
							uni.showToast({
								title: '撤销成功',
								icon: 'success'
							});
							this.loadOrders(); // 刷新工单单列表
							this.closeRevokeModal();
						} else {
							uni.showToast({
								title: '撤销失败',
								icon: 'none'
							});
						}
					} catch (err) {
						uni.showToast({
							title: '请求接口失败',
							icon: 'none'
						});
					}
				} else {
					uni.showToast({
						title: '撤销原因不得少于10个字符',
						icon: 'none'
					});
				}
			}
		},
		mounted() {
			this.fetchTypeList(); // 页面加载时获取类型列表
		}
	};
</script>

<style scoped>
	.order-page {
		padding: 16px;
		background: #f0f4f8;
	}

	/* 页面标题 */
	.page-header {
		background: linear-gradient(90deg, #007bff, #00c6ff);
		color: white;
		padding: 14px;
		border-radius: 12px;
		text-align: center;
		font-size: 20px;
		font-weight: bold;
		box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3);
		margin-bottom: 20px;
	}

	/* 筛选卡片 */
	.header {
		background: linear-gradient(90deg, #1976d2, #2196f3);
		color: white;
		padding: 12px;
		text-align: center;
		font-size: 18px;
		font-weight: bold;
		border-radius: 8px;
		margin-bottom: 20px;
	}

	/* 筛选卡片 */
	.filter-card {
		background: #fff;
		border-radius: 10px;
		padding: 16px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	/* 筛选项 */
	.filter-item {
		display: flex;
		align-items: center;
		width: 100%;
		/* ✅ 让每个元素占满整行 */
		margin-bottom: 16px;
	}


	/* 左侧小竖线 label */
	.form-label {
		font-weight: 500;
		font-size: 14px;
		color: #333;
		display: flex;
		align-items: center;
	}

	.form-label::before {
		content: '';
		display: inline-block;
		width: 4px;
		height: 16px;
		background-color: #1976d2;
		border-radius: 2px;
		margin-right: 8px;
	}

	/* 下拉框、输入框 */
	.picker,
	input {
		flex: 1;
		padding: 6px 10px;
		border: 1px solid #ccc;
		border-radius: 6px;
		background: #f9f9f9;
		font-size: 13px;
		color: #333;
	}

	/* 查询按钮 */
	.submit-button {
		width: 100%;
		padding: 12px;
		background: linear-gradient(90deg, #1976d2, #2196f3);
		color: #fff;
		border: none;
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		font-weight: 500;
		cursor: pointer;
		margin-top: 10px;
	}

	.filter-input {
		flex: 1;
		padding: 10px 12px;
		border: 1px solid #d0d7de;
		border-radius: 10px;
		background: #f9fbfd;
		color: #333;
		font-size: 14px;
	}

	/* 按钮统一风格 */
	.primary-btn {
		width: 100%;
		padding: 12px;
		background: linear-gradient(90deg, #007bff, #00c6ff);
		color: white;
		font-weight: bold;
		font-size: 15px;
		border: none;
		border-radius: 10px;
		box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2);
	}

	.disabled-btn {
		width: 100%;
		padding: 12px;
		background: #cfd8e3;
		color: white;
		font-weight: bold;
		font-size: 15px;
		border: none;
		border-radius: 10px;
	}

	/* 工单列表 */
	.order-list {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	/* 工单卡片 */
	.order-card {
		background: #ffffff;
		padding: 18px;
		border-radius: 16px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
		transition: transform 0.2s;
	}

	.order-card:hover {
		transform: translateY(-2px);
	}

	.order-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
	}

	.order-id {
		font-weight: bold;
		color: #222;
	}

	.order-status {
		font-size: 12px;
		padding: 4px 10px;
		border-radius: 20px;
		font-weight: 500;
	}

	/* 状态颜色标签 */
	.status-1 {
		background: #ffe9c0;
		color: #b97700;
	}

	.status-2 {
		background: #dceeff;
		color: #007bff;
	}

	.status-3 {
		background: #ffd6d6;
		color: #d93030;
	}

	.status-4 {
		background: #c1f0ff;
		color: #00aaff;
	}

	.status-5 {
		background: #d6f5d6;
		color: #28a745;
	}

	.status-6 {
		background: #e0e0e0;
		color: #777;
	}

	/* 撤销弹窗背景和整体样式 */
	.modal-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		/* 半透明背景 */
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.modal-box {
		background: #ffffff;
		padding: 24px;
		border-radius: 12px;
		width: 80%;
		max-width: 360px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	}

	.modal-title {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 10px;
		text-align: center;
		color: #007bff;
		/* 蓝色主题 */
	}

	.modal-tip {
		font-size: 14px;
		color: #666;
		margin-bottom: 10px;
		text-align: center;
	}

	.modal-textarea {
		width: 100%;
		height: 100px;
		padding: 10px;
		border: 1px solid #ccc;
		border-radius: 8px;
		margin-bottom: 16px;
		background: #f9f9f9;
		font-size: 14px;
		color: #333;
	}

	.modal-actions {
		display: flex;
		justify-content: space-between;
		gap: 10px;
	}

	/* 按钮样式 */
	.cancel-btn,
	.submit-btn {
		flex: 1;
		height: 50px;
		padding: 10px;
		font-size: 16px;
		line-height: 1.5;
		text-align: center;
		background-color: #007bff;
		/* 蓝色背景 */
		color: white;
		border: none;
		border-radius: 8px;
		/* 圆角 */
		cursor: pointer;
	}

	.cancel-btn {
		background-color: #007bff;
		/* 蓝色背景 */
	}

	.submit-btn {
		background-color: #28a745;
		/* 绿色背景 */
	}

	.cancel-btn:hover,
	.submit-btn:hover {
		opacity: 0.8;
		/* 悬停效果 */
	}

	.cancel-btn:disabled,
	.submit-btn:disabled {
		background-color: #ccc;
		/* 禁用状态 */
		cursor: not-allowed;
		opacity: 0.5;
	}


	.order-body {
		margin-bottom: 12px;
	}

	.order-title {
		font-size: 16px;
		color: #222;
		font-weight: 500;
		margin-bottom: 6px;
	}

	.order-time {
		font-size: 13px;
		color: #666;
	}

	.order-footer {
		display: flex;
		justify-content: flex-end;
	}

	.no-data {
		margin-top: -20px;
		text-align: center;
		padding: 40px 20px;
		color: #888;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.no-data-image {
		width: 400px;
		height: 200px;
		margin-bottom: 20px;
		opacity: 0.8;
	}

	.no-data-title {
		font-size: 16px;
		font-weight: bold;
		color: #555;
		margin-bottom: 8px;
	}

	.no-data-desc {
		font-size: 13px;
		color: #999;
	}
</style>